import React, { useState, FC } from 'react';
import { Button, Form, Input, Checkbox, Row, Col } from 'antd';
import { UserOutlined, LockOutlined, MobileOutlined } from '@ant-design/icons';

import ReactSimpleVerify from 'react-simple-verify'
//  import 'react-simple-verify/dist/react-simple-verify.css'

import { request } from '../../axios/request'


import './login.less';
import internal from 'stream';


type JsonResult<T> = {
      code : number ;
      msg : string;
      data :T;
}



declare type LoginButtonTextPojo = {

    text?: string;
    onClick?: () => void,
    className?: string,
}

declare type StateType = {
    isAccoutForm?: boolean;
};

declare type ButtonTitleClassNamePojo = {
    accoutClassName?: string,
    hisClassName?: string,
}


interface LoginProps {
    setStateValue: (value: boolean) => void;
}


/**
 *  login登入的头
 * @param prop
 * @returns
 */
const LoginButtonText = (prop: LoginButtonTextPojo) => {
    return <Button className={prop.className} onClick={prop.onClick}>{prop.text}</Button>
}

const HISLoginForm = () => {
    const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
    };


    const [isPass, setIsPass] = useState(false);

    /**
     * 验证成功
     */
    const success = () => {
        setIsPass(isPass === true ? isPass : !isPass);
    }


    return (
        <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
        >
            <Form.Item
                name="phone"
                rules={[{ required: true, message: '请输入手机号!' }]}
            >
                <Input prefix={<MobileOutlined className="site-form-item-icon" style={{ color: 'gray' }} />}
                    placeholder="手机号" allowClear />
            </Form.Item>

            <Form.Item
                name="isPass"
            >
                <ReactSimpleVerify ref="verify" success={success} movedColor='#457EF2' successTips='验证通过' />

            </Form.Item>

            <Form.Item className='captcha'>
                <Row gutter={8}>
                    <Col span={15}>
                        <Form.Item
                            name="captcha"
                            noStyle
                            rules={[{ required: true, message: '请输入验证码' }]}
                        >
                            <Input
                                prefix={<LockOutlined className="site-form-item-icon" style={{ color: 'gray' }} />}
                                type="password"
                                placeholder="验证码"
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={9}>
                        <Button> 发送验证码</Button>
                    </Col>
                </Row>
            </Form.Item>


            <Form.Item className='remember'>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>自动登入</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" href="1">
                    忘记密码
                </a>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                    登入
                </Button>
            </Form.Item>
        </Form>
    );
};


const AccountLoginFrom = (prop: any) => {


    const onFinish = (values: any) => {
        values.grant_type = "defaultPcLogin"
        request.post("/oauth/token",values).then((response) => {
            console.log("response.data", response);

         })


    };


    return <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        onFinish={onFinish}

    >
        <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
        >
            <Input prefix={<UserOutlined className="site-form-item-icon" style={{ color: 'gray' }} />} placeholder="账号名称"
                allowClear />
        </Form.Item>


        <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
        >
            <Input
                prefix={<LockOutlined className="site-form-item-icon" style={{ color: 'gray' }} />}
                type="password"
                placeholder="密码"
                allowClear
            />
        </Form.Item>

        <Form.Item className='remember'>
            <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>自动登入</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="1">
                忘记密码
            </a>
        </Form.Item>

        <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
                登入
            </Button>
        </Form.Item>
    </Form>

}


const LoginDiv: FC<LoginProps> = ({ children, setStateValue }) => {

    // 声明一个叫 "count" 的 state 变量
    const [buttonTitleClassNamePojo, setButtonTitleClassNamePojo] = useState<ButtonTitleClassNamePojo>({
        accoutClassName: 'loginButtonText loginButtonSelected',
        hisClassName: 'loginButtonText',
    });


    const setIsAccout = (val: boolean) => {
        setStateValue(val)
        if (val) {
            setButtonTitleClassNamePojo({
                accoutClassName: 'loginButtonText loginButtonSelected',
                hisClassName: 'loginButtonText',
            })
        } else {
            setButtonTitleClassNamePojo({
                accoutClassName: 'loginButtonText ',
                hisClassName: 'loginButtonText loginButtonSelected',
            })
        }
    }


    return <div className='loginDetailDiv'>
        <div className='loginDiv'>
            <h1 className='loginTitle'>手术麻醉信息系统</h1>
            <div>
                <LoginButtonText className={buttonTitleClassNamePojo.accoutClassName} text="账号登入"
                    onClick={() => setIsAccout(true)}></LoginButtonText>
                <LoginButtonText className={buttonTitleClassNamePojo.hisClassName} text="HIS登入"
                    onClick={() => setIsAccout(false)}></LoginButtonText>
                {children}
            </div>
        </div>
        <div className='loginDetailImgDiv'></div>
    </div>;


}

class Login extends React.Component<any, StateType> {


    constructor(props: any) {
        super(props);
        //局部的 state
        this.state = {
            isAccoutForm: true,
        };
    }


    setStateValue = (val: boolean) => {
        this.setState({
            isAccoutForm: val,
        })
    }


    render() {
        return <div className='login'>
            <div className='zz'></div>
            <LoginDiv setStateValue={this.setStateValue}>
                {this.state.isAccoutForm ? <AccountLoginFrom /> : <HISLoginForm />}
            </LoginDiv>
        </div>
    }

}


export default Login;


